import { useRouter } from 'next/router'


export default function DynamicRouteDemo(props) {
    const router = useRouter()
    console.log(router);
    return (
        <>
            <div>动态路由页面{router.query.pid}</div>
            <div>router.query:{JSON.stringify(router.query)}</div>
            <div>props:{JSON.stringify(props)}</div>
        </>
    )
}

/**
 * 获取动态路由的所有路由，用于生成静态页面
 */
export async function getStaticPath() {
    let pids
    await new Promise((res, rej) => {
        setTimeout(() => {
            pids = [333, 444]
            res()
        }, 2000)
    })
    console.log('getServerSidePropsContext:', context);
    return {
        paths: [pids.map(el => ({ params: { pid: el } }))],
        fallback: false
        /**
        fallback: false：不降级，命中尚未生成静态页面的路由直接 404
        fallback: true：降级，命中尚未生成静态页面的路由先返回降级页面（此时props为空，一般显示个 loading），静态生成 HTML 的同时会生成一份 JSON 供降级页面 CSR 使用，完成之后浏览器拿到数据（在客户端填上props），渲染出完整页面
        fallback: 'blocking'：不降级，并且要求用户请求一直等到新页面静态生成结束（实际上就是 SSR，渲染过程是阻塞的，只是完成之后会保留结果 HTML,注意不支持next export打包命令）
         */
    }
}